<template>
  <div v-if="filmInfo">
    <detail-header v-scroll="50">
      {{ filmInfo.name }}
    </detail-header>
    <!-- <img :src="filmInfo.poster" alt=""> -->
    <div
      :style="{
        backgroundImage: 'url(' + filmInfo.poster + ')',
      }"
      class="poster"
    ></div>
    <div class="content">
      <div>{{ filmInfo.name }}</div>
      <div>
        <div class="detail-text">{{ filmInfo.category }}</div>
        <div class="detail-text">{{ filmInfo.premiereAt | dataFilter }}</div>
        <div class="detail-text">
          {{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟
        </div>
        <div
          class="detail-text"
          style="line-height=18px;"
          :class="isHidden ? 'hidden' : ''"
        >
          {{ filmInfo.synopsis }}
        </div>
        <div style="text-align: center">
          <i class="iconfont icon-location" @click="isHidden = !isHidden"></i>
        </div>
      </div>

      <!--演职人员 -->
      <div>
        <div style="margin-bottom: 10px">演职人员</div>
        <detail-swiper :perview="3.5" name="actors">
          <detail-swiper-item
            v-for="(data, index) in filmInfo.actors"
            :key="index"
          >
            <div
              :style="{
                backgroundImage: 'url(' + data.avatarAddress + ')',
              }"
              class="avatar"
            ></div>
            <div style="text-align: center; font-size: 12px">
              {{ data.name }}
            </div>
            <div style="text-align: center; font-size: 13px">
              {{ data.role }}
            </div>
          </detail-swiper-item>
        </detail-swiper>
      </div>

      <!-- 剧照 -->
      <div>
        <div style="margin: 10px">剧照</div>
        <detail-swiper :perview="2" name="photos">
          <detail-swiper-item
            v-for="(data, index) in filmInfo.photos"
            :key="index"
          >
            <div
              :style="{
                backgroundImage: 'url(' + data + ')',
              }"
              class="avatar"
              @click="handlePreview(index)"
            ></div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/util/http";
import moment from "moment";
moment.locale("zh-cn"); //设置中文

import Vue from "vue";
import detailSwiper from "../components/detail/DetailSwiper";
import detailSwiperItem from "../components/detail/DetailSwiperItem";
import detailHeader from "../components/detail/DetailHeader";
import obj from '@/util/mixinsObj'
/* 图片预览组件 */
import { ImagePreview} from "vant";

Vue.filter("dataFilter", (data) => {
  return moment(data * 1000).format("YYYY-MM-DD");
});

Vue.directive("scroll", {
  inserted(el, binding) {
    // console.log(el);
    el.style.display = "none";

    window.onscroll = () => {
      /*兼容性问题 */
      if (
        (document.documentElement.scrollTop || document.body.scrollTop) >
        binding.value
      ) {
        el.style.display = "block";
      } else {
        el.style.display = "none";
      }
    };
  },
  unbind() {
    window.onscroll = null;
  },
});

export default {
  mixins:[obj],
  data() {
    return {
      filmInfo: null,
      isHidden: true,
    };
  },
  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader,
  },
  methods: {
    handlePreview(index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: "top-left",
      });
    },
  },

  mounted () {
  
    /* $route当前匹配的路由 */
    // console.log("created", this.$route.params.id);
    // axios利用id发请求到详情接口，获取详细数据，布局页面
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=106604`,
      headers: {
        "X-Host": " mall.film-ticket.film.info",
      },
    }).then((res) => {
      console.log(res.data.data.film);
      this.filmInfo = res.data.data.film;


    })
  },
};
</script>

<style lang="scss">
.poster {
  width: 100%;
  height: 19.4444rem;
  background-position: center;
  background-size: cover;
}
.content {
  padding: 0.8333rem;
  .detail-text {
    color: #797d82;
    font-size: 0.7222rem;
    margin-top: 0.2222rem;
  }
}
.hidden {
  overflow: hidden;
  height: 36px;
}
.avatar {
  height: 4.7222rem;
  width: 100%;
  background-position: center;
  background-size: cover;
}
</style>
